<template>
    <div class="clearfix">
        <div class="top-menu pos-fix clearfix">
            <div class="con-width-1200 clearfix">
                <!-- 使用 router-link 组件来导航. -->
                <!-- 通过传入 `to` 属性指定链接. -->
                <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
                <img class="fxl logo" src="../assets/images/logo.jpg">
                <div class="fxr inp pos-rel">
                    <i class="iconfont pos-abs icon-search"></i>
                    <input placeholder="请输入您要搜索的内容">
                </div>
                <ul class="fxr menu-list pos-rel">
                    <li v-for="site in menu" :key="site.id">
                        <router-link :to="{ path: site.path }"><span>{{site.name}}</span></router-link>
                        <!--<ul class="sub-menu pos-abs" v-show="isSubshow">
                         <li>
                           <a href="javascript:void()">课程介绍</a>
                         </li>
                         <li>
                           <a href="javascript:void()">课程安排</a>
                         </li>
                         <li>
                           <a href="javascript:void()">瑜伽礼仪</a>
                         </li>
                       </ul>-->
                    </li>
                </ul>
            </div>
        </div>
        <div class="alert-top clearfpx pos-fix">
            <ul>
                <li>
                    <i class="iconfont icon-shuiguo"></i>
                    <p>首页</p>
                </li>
                <li>
                    <i class="iconfont icon-ziyuan"></i>
                    <p>客服</p>
                </li>
                <li class="pos-rel weixin" @mouseover="mouseOver" @mouseleave="mouseLeave">
                    <i class="iconfont icon-erweima"></i>
                    <p>二维码</p>
                    <div class="block pos-abs" v-show="seen">
                        <div class="con clearfix">
                            <img class="img" src="../assets/images/qrcode_jingyujiachuanqi_1.jpg">
                            <p>微信扫描二维码</p>
                            <p>开启美食之旅</p>
                        </div>
                    </div>
                </li>
                <li @click="backTop">
                    <i class="iconfont icon-up2"></i>
                    <p>置顶</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import _http from "../httpService"

    export default {
        name: "Header",
        props: {
            msg: String
        },
        data() {
            return {
                loading: true,
                seen: false,
                menu: null,
                isSubshow: false,
            };
        },

        methods: {
            backTop() {
                document.body.scrollTop = 0
                document.documentElement.scrollTop = 0
            },
            // 移入
            mouseOver() {
                this.seen = true;
            },
            // 移出
            mouseLeave() {
                this.seen = false
            },
        },

        mounted() {
            _http.get("/menu/selectListByEnterpriseIdAndParentCode?parentCode=0")
                .then(response => {
                    console.log(response);
                    this.menu = [];
                    // let tmp = [];
                    response.data.forEach(element => {
                        this.menu.push({name: element.name, path: element.routerPath});
                    });

                    // this.menu = tmp;
                })
                .catch(error => console.log(error))
                .finally(() => (this.loading = false));
        }
    };
</script>

<style>
    @import "../assets/css/public.css";


    ul.menu-list li {
        float: left;
        position: relative;
    }

    ul.menu-list li a {
        color: #333333;
        padding: 0px 20px;
        font-weight: bold;
        line-height: 80px;
        height: 80px;
        display: block;
        white-space: nowrap;
        font-size: 16px;
    }

    ul.menu-list li a.router-link-exact-active {
        color: #2c9d69;
    }

    ul.menu-list li a span {
        padding: 5px 0px;
    }

    ul.menu-list li a.router-link-exact-active span,
    ul.menu-list li:hover a span {
        border-bottom: 2px solid #2c9d69;
    }

    ul.sub-menu {
        padding: 10px 0px;
        background: rgba(255, 255, 255, .5);
    }

    ul.sub-menu > li > a {
        height: 30px;
        line-height: 30px;
        color: #2c9d69;
    }

    ul.sub-menu > li > a:hover {
        background: rgba(44, 157, 105, .1)
    }

    .top-menu {
        z-index: 100;
        left: 0px;
        top: 0px;
        right: 0px;
        /*background:rgba(50,29,25,.9);*/
        background: #fff;
        /*backcgound:#321d19*/
        -webkit-box-shadow: 1px 0px 5px rgba(0, 0, 0, .1);
        -moz-box-shadow: 1px 0px 5px rgba(0, 0, 0, .1);
        box-shadow: 1px 0px 5px rgba(0, 0, 0, .1);
    }

    .logo {
        height: 60px;
        margin: 10px 0px;
    }

    .carousel {
        width: 100%;
        height: 800px;
        overflow: hidden;
        position: relative;
    }

    .carousel ul {
        width: 100%;
        height: 100%;
    }

    .carousel ul li {
        width: 100%;
        position: absolute;
    }

    .carousel ul li a img {
        width: 100%;
        height: 800px;
    }

    .bullet {
        position: absolute;
        font-size: 0;
        bottom: 50px;
        left: 0px;
        right: 0px;
        text-align: center;
    }

    .bullet span {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: rgba(255, 255, 255, .7);
        margin-left: 15px;
        border-radius: 10px;
    }

    .bullet span:first-child {
        margin-left: 0;
    }

    .switch {
        top: 50%;
        left: 50%;
        margin-left: -600px;
    }

    .switch span {
        cursor: pointer;
        position: absolute;
        font-family: "Microsoft Sans Serif";
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 40px;
        color: rgba(255, 255, 255, .4);
        top: 50%;
        margin-top: -25px;
        border: 3px solid rgba(255, 255, 255, .4);
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
    }

    .switch span:hover {
        border: 3px solid rgba(255, 255, 255, 1);
        color: rgba(255, 255, 255, 1);
    }

    .prev {
        left: 0;
    }

    .next {
        right: 0;
    }

    .active {
        background-color: rgba(0, 0, 0, .8) !important;
    }


    /*.image-enter-active{
        transform:translateX(0);
        transition:all 1s ease;
    }
    .image-leave-active{
        transform:translateX(-100%);
        transition:all 1s ease
    }
    .image-enter{
        transform:translateX(100%);
    }
    .image-leave{
        transform:translateX(0);
    }*/
    .alert-top {
        top: 40%;
        left: 50%;
        z-index: 100;
        background: #fff;
        padding: 5px 0px;
        margin-left: 600px;
        -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, .1);
        -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, .1);
        box-shadow: 0px 0px 8px rgba(0, 0, 0, .1);
    }

    .alert-top ul li {
        padding: 5px 10px;
        cursor: pointer;
    }

    .alert-top ul li i {
        font-size: 28px;
    }

    .alert-top ul li:hover {
        color: #2c9d69;
    }

    .alert-top ul li.weixin .block {
        left: -140px;
        top: -30px;
    }

    .alert-top ul li.weixin .con {
        position: relative;
        background: #fff;
        padding: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, .1);
        -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, .1);
        box-shadow: 0px 0px 6px rgba(0, 0, 0, .1);
        color: #999;
    }

    .alert-top ul li.weixin .con:after {
        position: absolute;
        top: 25%;
        right: -10px;
        content: '';
        width: 0;
        height: 0;
        Border-top: 10px solid transparent;
        Border-bottom: 10px solid transparent;
        Border-left: 15px solid #fff;
    }

    .alert-top ul li.weixin:hover {
        background: #2c9d69;
        color: #fff;
    }

    .alert-top ul li.weixin img {
        width: 120px;
    }

    .inp {
        padding: 25px 0px 0px 20px;
    }

    .inp input {
        border: 1px solid #dddddd;
        padding: 5px;
        font-size:14px;
        padding-right:20px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        width:200px;
    }
    .inp i{right:5px;top:30px;color:#e6e6e6;font-size:18px;
        cursor: pointer;}
</style>
